<template>
	<view class="v-body">
		<!-- #ifdef APP-PLUS -->  
		<view class="status_bar">  
			<view class="top_view"></view>  
		</view>  
		<!-- #endif -->  
    <view class="flex flex-h flex-hsb flex-vc top-bar">
    	<view class="flex flex-h tabs" @tap="tabsTap">
    		<view class="tabs-item" :class="{'active': tabsIndex===0}" data-index="0">关注</view>
    		<view class="tabs-item" :class="{'active': tabsIndex===1}" data-index="1">订阅</view>
    	</view>
    	<image src="../../static/images/icon_add_user.png" class="add-user"></image>
    </view>
		
		<!-- content -->
		<!-- 关注 list -->
		<view class="tabs-content" v-show="tabsIndex===0">
			<view class="ad-box">
				<image class="ad" :src="focus.ad.url" mode="aspectFit"></image>
				<text class="iconfont icon-close"></text>
			</view>
			
			<view class="focus-item" v-for="item in focus.list" :key="item.id">
				<view class="flex flex-h flex-hsb top" v-if="item.referrer">
					<text>由你的好友<text class="link-color">{{item.referrer}}</text>推荐</text>
					<text class="iconfont icon-close2" style="color: #d0d0d0"></text>
				</view>
				<view class="flex flex-h flex-hsb flex-vc user-box">
					<image :src="item.uAvatar" mode="aspectFit"></image>
					<view class="flex-1">{{item.uname}}</view>
					<text class="focus-btn">关注</text>
				</view>
				
				<view class="content-box">
					<view class="title">{{item.title}}</view>
					<!-- 发布类型为图片的 -->
					<view class="img-box" v-if="item.type=='img'">
						<image :src="item.imgs[0]" mode="widthFix"></image>
						<!-- <view class="img-more">查看完整图片</view> -->
					</view>
					<view class="content">{{item.content}}</view>
					
					
				</view>
				<!-- 用户的位置 -->
				<view class="flex flex-h flex-vc address-box" v-if="item.address">
					<text class="iconfont icon-address"></text>
					<text>{{item.address}}</text>
				</view>
				<!-- 是否转载 -->
				<view class="flex flex-h flex-vc forward-box" v-if="item.forward">
					<text class="iconfont icon-forward"></text>
					<view class="text">转载自 <text style="font-weight: bold;">{{item.forward.uname}}</text></view>
				</view>
				<!-- 标签 -->
				<view class="flex flex-h flex-vc tags-box" v-if="item.tags.length">
					<text style="font-size: 32upx; font-weight: bold;">#</text>
					<view class="flex-1 tags-content">						
						<text v-for="(titem, tindex) in item.tags" :key="titem">{{titem}}</text>
					</view>
				</view>								
				<!-- 是否有合集 -->
				<view class="collection-box" v-if="item.collection">
					<text class="iconfont icon-file" style="margin-right: 10upx;"></text>
					<text>{{item.collection.name}}</text>
					<text v-if="item.collection.num">({{item.collection.num}}篇)</text>
				</view>
				<!-- 喜欢 - 留言 - 转发 - 点赞 - 更多 -->
				<view class="flex flex-h flex-hsb operate-box">
					<view class="flex flex-h flex-1">
						<view class="like-box">
							<text class="iconfont icon-like"></text>
							<text class="text" v-if="!item.isFocus">4小时前</text>
						</view>
						<view class="comment-box">
							<text class="iconfont icon-comment"></text>
							<text class="text" v-if="!item.isFocus">4小时前</text>
						</view>
						<view class="forward2-box">
							<text class="iconfont icon-forward2"></text>
							<text class="text" v-if="!item.isFocus">4小时前</text>
						</view>
						<view class="like2-box">
							<text class="iconfont icon-like2"></text>
							<text class="text" v-if="!item.isFocus">4小时前</text>
						</view>
					</view>
					<view class="more-box">
						<text class="iconfont icon-more"></text>
						<text class="text" v-if="!item.isFocus">4小时前</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 订阅 -->
		<view class="tabs-content" v-show="tabsIndex===1">
			<!-- 常访问 -->
			<view class="most-visited">
				<text class="title" v-if="mostVisited.length">最常访问</text>
				<view class="visited-item" v-for="(item) in mostVisited" :key="item.id">
					<view class="flex flex-h flex-hsb flex-vc" style="height: 100upx;">
						<view class="flex-1 item-title">
							<text style="margin-left: 35upx; font-size: 36upx; color: #98c501;">#</text>
							{{item.title}}
						</view>
						<view class="item-newPost">{{item.newPostStr}}</view>
					</view>
					
					<view class="flex flex-h flex-hsb visited-newList">
						<view v-for="(sitem, sindex) in item.newPostList" :key="sitem.id">
							<image :src="sitem.imgs[0]" mode="aspectFit" v-if="sitem.type=='img'"></image>
							<view class="sub-title" v-if="sitem.type=='text'">{{sitem.title}}</view>
							<view class="sub-content" v-if="sitem.type=='text'">{{sitem.content}}</view>						
						</view>
					</view>
				</view>
			</view>
			<!-- 我的订阅列表 -->
			<view class="my-list">
				<view class="title">我的订阅</view>
				<view class="flex flex-h flex-hsb list-item"
					v-for="(item) in myList" :key="item.id">
						<image :src="item.thumbnail" mode="aspectFill" class="img"></image>
						<view class="flex flex-h flex-hsb flex-vc flex-1 item-right">
								<view class="flex-1 item-title">{{item.title}}</view>
								<view class="item-newPost">{{item.newPostStr}}</view>
						</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import data from '../../static/data/home.js';
	export default {
		data() {
			return {
				tabsIndex: 0,
				focus: {},
				mostVisited: [],
				myList: []
			}
		},
		onShow(){
			console.log('index');
		},
		onLoad() {
			
			data.focus.list.map(item=>{
				
			})
			this.focus = data.focus;
			
			data.subscribe.mostVisited.map(item=>{
				item.newPostStr = item.newPost > 9999? '9999+' : item.newPost
			});
			this.mostVisited = data.subscribe.mostVisited;
			data.subscribe.mylist.map(item=>{
				item.newPostStr = item.newPost > 9999? '9999+' : item.newPost
			})
			this.myList = data.subscribe.mylist;
		},
		methods: {
			tabsTap(e){
				let index = parseInt(e.target.dataset.index || 0);
				this.tabsIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	$color-333: #333;
	$color-grey: #b0b0b0;
	$link-color: #6e9bbb;
	
	.status_bar{ background-color: #fff;}
	.link-color{ color: $link-color;}
	.v-body{background-color: #f4f6f5;}
	
	
	// tabs bar
	.top-bar{ 
		padding: 0 50upx; 
		background-color: #fff;
		.tabs-item{
			width: 280upx;
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;
			text-align: center;
			&.active{
				border-bottom: solid 1px $color-333;
			}
		}
		.add-user{
			width: 45upx;
			height: 45upx;
		}
	}	
	.content-box{
		padding: 20upx 35upx;
		.title{
			margin-bottom: 20upx;
			line-height: 26upx;
			font-size: 26upx;
			font-weight: bold;
		}
		.img-box{
			margin-bottom: 20upx;
			max-height: 800upx;
			overflow: hidden;
			text-align: center;
			image{
				width: 100%;
			}
		}
		.content{
			max-height: 800upx;
			line-height: 36upx;
			font-size: 22upx;
			overflow: hidden;
		}
	}
	// 关注
	.ad-box{
		position: relative;
		width: 100%;
		height: 250upx;
		image{ 
			position: absolute;
			top: 0;
			left: 0;
			width: 100%; 
			height: 100%;
		}
		.icon-close{ 
			position: absolute;
			top: 20upx;
			right: 20upx;
			color: #fff;
			opacity: .8;
		}
	}
	.focus-item{
		margin-top: 20upx;
		background-color: #fff;
		.top{
			padding: 20upx 35upx;
			color: $color-grey;
			font-size: 22upx;
			border-bottom: dashed 1px #d6d6d6;
		}
		// 用户相关信息
		.user-box{
			padding: 20upx 35upx;
			font-size: 26upx;
			> image{
				margin-right: 35upx;
				width: 90upx;
				height: 90upx;
				-webkit-border-radius: 50%;
				border-radius: 50%;
			}
			.focus-btn{
				width: 130upx;
				height: 60upx;
				line-height: 58upx;
				color: #fff;
				background-color: #9ac601;
				-webkit-border-radius: 30upx;
				border-radius: 30upx;
				text-align: center;
			}
		}
		
		// 地区/转发样式
		.address-box, .forward-box{
			margin: 20upx 0;
			padding: 0 20upx;
			font-size: 22upx;
			color: $color-grey;			
			> text{
				margin-right: 20upx;
			}
		}
		// 标签样式
		.tags-box{
			margin: 20upx 0;
			padding: 0 20upx;		
			font-size: 22upx;
			color: $color-grey;			
			.tags-content{
				padding: 1px 0;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				&::-webkit-scrollbar{ display: none;}
			}			
			text{ margin: 0 10upx;}
			> text{ margin-left: 0;}			
		}
		// 合集样式
		.collection-box{
			display: inline-block;
			margin: 0 20upx;
			padding: 20upx 10upx;
			font-size: 22upx;
			color: $color-grey;
			background-color: #f7f7f7;
			-webkit-border-radius: 4upx;
			border-radius: 4upx;
		}
		// 操作组
		.operate-box{
			margin: 20upx 20upx;
			padding: 20upx 0;
			font-size: 22upx;
			color: $color-grey;		
			border-top: dashed 1px #bbb;
			text{ display: block;}
			.like-box, .comment-box, .forward2-box, .like2-box, .more-box{
				margin-right: 20upx;
				min-width: 100upx;
				text{
					&:first-child{
						margin-bottom: 40upx;
					}
				}
			}
			.more-box{
				margin-right: 0;
				max-width: 120upx;
				text-align: right;
			}
		}		
	}
	
	// 最常访问
	.most-visited{
		.title{
			display: block;
			padding: 35upx 0 35upx 35upx;
			font-size: 28upx;
		}
		.visited-item{
			margin-top: 20upx;
			background-color: #fff;
			&:first-of-type{ margin-top: 0;}
			.visited-newList{
				> view{ 
					padding: 10upx 10upx;
					width: 245upx;
					height: 245upx;
					line-height: 26upx;
					background-color: #eee;
				  overflow: hidden;
					text-align: center;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					image{
						width: 100%;
						height: 100%;
					}
					.sub-title{
						margin-bottom: 10upx;
						width: 100%;
						height: 24upx;
						font-size: 26upx;
						font-weight: bold;
						overflow: hidden;
					}
					.sub-content{
						width: 100%;
						height: 185upx;
						font-size: 22upx;
						overflow: hidden;
						text-align: left;
					}
				}
			}
		}		
	}
	
	/* 我的订阅 */
	.my-list{
		margin-top: 20upx;
		background-color: #fff;
		.title{
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;
			color: #9a9a9a;
			border-bottom: solid 1px #e6e6e6;
			text-indent: 35upx;
		}
		.list-item {
			.img{
				margin: 20upx 35upx 20upx 35upx;
				width: 80upx;
				height: 80upx;
				overflow: hidden;
			}
			.item-right{
				border-bottom: solid 1px #E6E6E6;
			}
		}
	}
	.most-visited, .my-list{
		.item-title{
			height: 52upx;
			line-height: 52upx;
			font-size: 22upx;
			font-weight: bold;
			overflow: hidden;
		}
		.item-newPost{
			padding: 0 15upx;
			margin: 0 35upx 0 35upx;
			height: 36upx;
			line-height: 34upx;
			color: #f9f9f9;
			background-color: #ccc;
			border-radius: 16upx;
		}
	}
</style>
